<template>
    <div class="navbar">
        <van-nav-bar title="填写订单" left-arrow @click-left="$router.go(-1)" />
    </div>

    <!-- 地址信息 -->
    <!-- 未登录状态 -->
    <div class="nologin" v-if="!userid">
        登录后查看您的地址
        <span @click="tologin" class="tologin">
            去登录
        </span>
    </div>
    <!-- 登录状态 -->
    <div class="login" v-else @click="toadres">
        <div class="bigbox" v-if="flag">
            <div>
                <div>
                    <span class="secor">默认</span>
                    <span>{{ defaultads }}</span>
                </div>
                <div class="addressDetail">{{ addressDetail }}</div>
                <div>
                    <span class="name">{{ name }}</span>
                    <span>{{ tel }}</span>
                </div>
            </div>
            <div class="icon">
                <van-icon name="arrow" size="35px" />
            </div>
        </div>
        <div class="bigbox" v-else>
            <span class="tips">请选择收货地址</span>
        </div>
    </div>


    <!-- 分割线 -->
    <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa' }" />
    <div>
        <van-card v-for="item in proList" :num="item.num" :price="item.originprice" :desc="item.proname"
            :thumb="item.img1" />
    </div>
    <div class="btbox">
        没有更多啦快去选购吧~~~
    </div>
    <van-submit-bar :price="total" button-text="确认订单" @submit="onSubmit" />
</template>

<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router';
import { ref, onMounted } from 'vue';
import { ConfirmOrder, GetDefaultAds, Orderlist, } from '@/api/api'
import { useUserInfoStore } from '@/stores/useInfo';
import { showToast } from 'vant';

const proList = ref<any[]>([])//商品列表
const store = useUserInfoStore()
const userid = store.getUserId
const router = useRouter()
const route = useRoute()
const defaultads = ref('')//默认显示地址
const addressDetail = ref('')
const name = ref('')
const tel = ref('')
const total = ref(0)
const flag = ref(false)


const confirmord = async () => {//获取确认订单信息
    const params = {
        userid: userid,
        time: route.query.time
    }
    const resut = await ConfirmOrder(params)
    console.log(resut);
    if (resut.data.code === '200') {
        proList.value = resut.data.data
    } else {
        showToast({
            message: '系统繁忙',
            position: 'middle'
        })
    }
}

const getdefaultads = async () => {  //获取默认地址信息
    const res2 = await GetDefaultAds({ userid: userid })
    if (res2.data.code === '200' && res2.data.data.length != 0) {
        flag.value = true
        let position = res2.data.data[0]
        defaultads.value = position.province + position.city + position.county//省市区
        addressDetail.value = position.addressDetail//精确地址
        name.value = position.name//用户名字
        tel.value = position.tel.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2");//用户手机  中间四位隐藏
        // console.log(proList.value);
        for (let i = 0; i < proList.value.length; i++) {
            total.value += (Number(proList.value[i].originprice) * Number(proList.value[i].num)) * 100
        }
    }
}

onMounted(async () => {
    if (userid) {
        await confirmord()
        await getdefaultads()
    } else {
        showToast({
            message: '请先去登录',
            position: 'middle'
        })
    }
})

const tologin = () => {
    router.push('/login')
}

const toadres = () => {
    router.push('/addres')
}

const onSubmit = () => {//确认订单  跳转到pay页面并传递价钱
    router.push({
        path: '/pay',
        query: {
            price: total.value
        }
    })
}
</script>

<style lang="scss" scoped>
.nologin {
    height: 60px;
    font-size: 20px;
    font-weight: 900;
    line-height: 60px;
    color: #e41d1d;

    .tologin {
        color: white;
        font-weight: normal;
        font-family: cursive;
        background-color: #e41d1d;
        border-radius: 10%;
        box-shadow: 10px;
        margin-left: 15px;
    }
}

.navbar {
    position: sticky;
    top: 0;
    z-index: 10000;
    background-color: white;
}

.icon {
    margin-right: 20px;
}

.name {
    margin: 0 10px;
}

.addressDetail {
    font-size: 16px;
    font-weight: 900;
    margin-left: 20px;
}

.van-submit-bar {
    height: 42px;
}

.bigbox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0;
    line-height: 30px;
    margin-top: 10px;

    .secor {
        background-color: red;
        color: white;
        padding: 3px;
        border-radius: 20%;
        margin: 0 10px;
    }
}

.tips {
    color: red;
    font-weight: 900;
    font-size: 20px;
    margin-left: 30px;
}

.btbox {
    line-height: 50px;
    text-align: center;
}
</style>